<template>
    <el-input class="w-full" :size="size" v-model="val"
        :maxlength="item.extra?.maxlength" :minlength="item.extra?.minlength" :type="item?.inputType || 'text'"
        :max="item?.extra?.max" :min="item?.extra?.min" :show-word-limit="item?.extra?.showWordLimit"
        :suffix-icon="item.suffixIcon" :disabled="item.disabled" :readonly="item.readonly"
        :placeholder="item.placeholder || '请输入'" @input="item?.callbacks?.handleInput" @blur="item.callbacks?.handleBlur"
        @focus="item.callbacks?.handleFocus?.(item, $event)" @change="item.callbacks?.handleChange" :clearable="item?.extra?.clearable ?? true">
        <template v-if="item?.extra?.prefix" #prefix>
            <div v-html="item?.extra?.prefix"></div>
        </template>
        <template v-if="item?.extra?.suffix" #suffix>
            <div v-html="item?.extra?.suffix"></div>
        </template>

        <template v-if="item?.extra?.prepend" #prepend>
            <slot name="prepend"></slot>
        </template>
        <template v-if="item?.extra?.append" #append>
            <slot name="append"></slot>
        </template>
    </el-input>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: [Number, String],
        default: ''
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value', 'change'])

const val = ref()

watch(() => props.value, (newval) => {
    val.value = newval
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})

</script>
<style lang="scss" scoped>
:deep(.el-input-group__append) {
    padding: 0 !important;
}
</style>
